
<template>
<div id="viewuser">   

      <!--这是修改的弹出框-->
<el-dialog
        title="请选择该宿管任职状态："
        :visible.sync="updateTag1"
        :close-on-click-modal="false" top="50px">

        <el-form lalel-width="100px"
        >
        
        
            <el-form-item label="用户姓名" >
                <el-input v-model="UpdateUser.realName" :disabled="true" ></el-input>
            </el-form-item>


             <el-form-item label="用户性别" >
               <el-input v-model="UpdateUser.sex" :disabled="true" ></el-input>
            </el-form-item>

           
          
             <el-form-item label="是否在职">
                   <el-radio-group v-model="UpdateUser.managerStatus">
                    <el-radio label="在职">在职</el-radio>
                    <el-radio label="离职">离职</el-radio>
                </el-radio-group>
            </el-form-item>

              

            

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="no()">取 消</el-button>
            <el-button type="primary" @click="change()">确 定</el-button>
        </span>
        </el-dialog>






     
      <el-table
    :data="pagination.list"
    border
    :cell-style="rowstyle"
    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
    style="width: 950px;margin-left:200px;">
   
    <el-table-column
      prop="realName"
      label="宿管姓名"
      width="150"
       
      >
     
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="150">
    </el-table-column>

    <el-table-column
      prop="studentPhone"
      label="联系电话"
      width="200">
    </el-table-column>
 
   

 
     <el-table-column
    
      label="宿管在职状态"
      width="130">

        <template slot-scope="scope">
              <span v-if="scope.row.managerStatus==='在职'" style="color: green;font-size:21px;font-weight:700;">在职</span>
              <span v-else-if="scope.row.managerStatus==='离职'" style="color: red;font-size:21px;font-weight:700;">离职</span>
      </template>
    </el-table-column>

<el-table-column
    
      label="操作"
      width="318"
     align="center">
      <template slot-scope="scope">
        
        <el-button type="success"  @click="handleEdit(scope.$index, scope.row)" >修改在职状态</el-button>
       
      </template>
    </el-table-column>


  
  </el-table>
   <!--分页-->
     <el-pagination
      style="margin-left:200px;margin-top:50px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[1,2,3,4,5,6,7]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

</div>
</template>
<script>
  export default {
    data() {
      return {
       pagination:{},
       UpdateUser:{},
        updateTag1:false,
      };
    },
    methods: {

          change(){
                var url="/manager/change" ;
                var params=new URLSearchParams();

                //params.append("roomId",this.UpdateUser.roomId);
                
                 //params.append("roomManagerId",this.UpdateUser.roomManagerId);
                 params.append("id",this.UpdateUser.id);
                // params.append("managerId",this.UpdateUser.managerId);
                 params.append("managerStatus",this.UpdateUser.managerStatus);
                  this.$axios.post(url,params).then(resp=>{

                    if(resp.data.tag==false){
                             //提示无法离职
                        this.$message({message:'离职失败，当前宿管有管理的宿舍'
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'error'});
                    }else{
                       this.updateTag1  = false;
                      this.find();
                        //提示修改成功
                        this.$message({message:'修改成功。'
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'success'});

                    }
                   
                  
               
          })


          },

      

  //点击修改，弹出框
      handleEdit(index,row){
           this.updateTag1 = true;

           this.UpdateUser =row;
           

      },
      
          no(){
                this.updateTag1 = false;
                this.find();
          },

        




    //列对齐
    rowstyle(){
       return "text-align: center" ;
       }
    
  ,

     handleselect(row){
     console.log(row);
     },
     find(page=1,size=6){
       var url="/manager/select" ;
            var params=new URLSearchParams();
            params.append("current",page);
            params.append("size",size);
           
           
          this.$axios.post(url,params).then(resp=>{
             
               this.pagination=resp.data;
               console.log(resp);
          })
     },
     
       //pageSize 改变时会触发回调参数每页条数
      handleSizeChange(size){
          this.find(this.pagination.current,size)

      },
      //currentPage 改变时会触发 回调参数当前页
      handleCurrentChange(page){
        this.find(page,this.pagination.size)
      },
     
    },
     mounted() {
        this.find();
    },
  };
</script>

<style scoped>
  #viewuser{
     margin-left: 50px;
    margin-top: 50px;
  }


  
</style>

